<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui222</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

    <link media="all" rel="stylesheet" th:href="@{/static/js/layui/css/layui.css}">
    <link media="all" rel="stylesheet" th:href="@{/static/css/global.css}">
    <script th:src="@{/static/js/layui/layui.js}" type="text/javascript"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';  /* project id 471320 */
            src: url('//at.alicdn.com/t/font_471320_t4v107mtyj2x1or.eot');
            src: url('//at.alicdn.com/t/font_471320_t4v107mtyj2x1or.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_471320_t4v107mtyj2x1or.woff') format('woff'),
            url('//at.alicdn.com/t/font_471320_t4v107mtyj2x1or.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_471320_t4v107mtyj2x1or.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>

    <Script Language=javascript>
        function Click() {
            if (event.button == 2) {
                alert
                ('屏蔽右键菜单');
            }
        }

        // 	document.onmousedown=Click;
    </Script>

    <Script Language=javascript>
        // function click() {
        // 	if (event.button==2||event.button==3) {
        // 	   alert("对不起,禁止使用此功能^_^");
        // 	}
        // }
        // document.onmousedown=click  ;
        function Click() {
            alert('对不起,禁止使用此功能^_^222');
            window.event.returnValue = false;
        }

        document.oncontextmenu = Click;


        locate = 0;

        function scroller() {
            if (locate != 500) {
                locate++;
                scroll(0, locate);
                clearTimeout(timer);
                var timer = setTimeout("scroller()", 3);
                timer;
            }
        }
    </Script>


    <Object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" id=closes type="application/x-oleobject">
        <Param name="Command" value="Close">
    </Object>
    <Script Language=javascript>
        closes.Click()
        window.open("XXX.htm", "", "menubar=no,location=no,scrollbars=yes,resizable=yes")
    </Script>

</head>
<!-- onload="clear()"  -->
<body>

<blockquote class="layui-elem-quote">
    大部分演示都在layer独立组件的官网，与内置的layer模块，用法是完全一致的
    <i class="iconfont">&#xe602;</i>
    <i class="iconfont">&#xe630;</i>
</blockquote>
<a class="layui-btn layui-btn-normal" href="http://layer.layui.com/" target="_blank">前去layer官网</a>

<fieldset class="layui-elem-field layui-field-title site-demo-button" style="margin-top: 30px;">
    <legend>特殊例子</legend>
</fieldset>

<input data-vart="321" id="testdata" type="text" value="123">

<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
    <blockquote class="layui-elem-quote layui-quote-nm">
        Tips：为了更清晰演示，每触发下述一个例子之前，都会关闭所有已经演示的层
    </blockquote>
    <button class="layui-btn" data-method="setTop">多窗口模式，层叠置顶</button>
    <button class="layui-btn" data-method="confirmTrans">配置一个透明的询问框</button>
    <button class="layui-btn" data-method="notice">示范一个公告层</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="t">上弹出</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="r">右弹出</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="b">下弹出</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="l">左弹出</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="lt">左上弹出</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="lb">左下弹出</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="rt">右上弹出</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="rb">右下弹出</button>
    <button class="layui-btn layui-btn-normal" data-method="offset" data-type="auto">居中弹出</button>
</div>


<!-- 示例-970 -->
<ins class="adsbygoogle" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"
     style="display:inline-block;width:970px;height:90px"></ins>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>再次温馨提醒</legend>
</fieldset>
<p class="site-demo-text">
    本页演示是采用了Layui加载的layer，如果你使用的是独立版的layer，无需通过layui.use('layer')来加载。Layui中的layer与独立版的layer的唯一不同，就是加载方式这一点有所差异，请阅读文档：<a
        href="http://www.layui.com/doc/modules/layer.html#use" target="_blank">http://www.layui.com/doc/modules/layer.html#use</a>
</p>

<!-- <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> -->
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['laydate', 'layer'], function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
            setTop: function () {
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '当你选择该窗体时，即会在最顶端'
                    , area: ['390px', '260px']
                    , shade: 0
                    , maxmin: true
                    , offset: [ //为了演示，随机坐标
                        Math.random() * ($(window).height() - 300)
                        , Math.random() * ($(window).width() - 390)
                    ]
                    , content: 'http://layer.layui.com/test/settop.html'
                    , btn: ['继续弹出', '全部关闭'] //只是为了演示
                    , yes: function () {
                        $(that).click();
                    }
                    , btn2: function () {
                        layer.closeAll();
                    }

                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
            , confirmTrans: function () {
                //配置一个透明的询问框
                layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了', '哦']
                });
            }
            , notice: function () {
                //示范一个公告层
                layer.open({
                    type: 1
                    ,
                    title: false //不显示标题栏
                    ,
                    closeBtn: false
                    ,
                    area: '300px;'
                    ,
                    shade: 0.8
                    ,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btn: ['火速围观', '残忍拒绝']
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 1 //拖拽模式，0或者1
                    ,
                    content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
                    ,
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'http://www.layui.com/'
                            , target: '_blank'
                        });
                    }
                });
            }
            , offset: function (othis) {
                var type = othis.data('type')
                    , text = othis.text();

                layer.open({
                    type: 1
                    , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'layerDemo' + type //防止重复弹出
                    , content: '<div style="padding: 20px 100px;">' + text + '</div>'
                    , btn: '关闭全部'
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            }
        };

        $('#layerDemo .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
//     alert(method+ "    ,    "+$("#testdata").data("vart"));// setTop  ，321
            active[method] ? active[method].call(this, othis) : '';
        });

        var arr = ["你", "抓", "不", "到", "我"];
        var index = 0;
        window.setInterval(function () {
            if (index++ == arr.length) {
                index = 1;
                document.title = arr[0];
            } else {
                document.title = document.title + arr[index - 1];
            }
        }, 500);


// 	console.log("%cColorful CSS","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em")
// 	console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

        console.log("%c", "padding:150px 200px;line-height:320px;background:url('http://p2.so.qhmsg.com/t01bf76b9d23273e6e7.gif') no-repeat;");
        console.log("一张网页，要经历怎样的过程，才能抵达用户面前？\n一位新人，要经历怎样的成长，才能站在技术之巅？\n探寻lxk秘密；\n体验这里的挑战；\n成为这里的女主人；\n影响lxk，你，可以影响世界。");
        console.log("%c https://yipianzhen.xin", "text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:2em")
    });


</script>
<script language="javascript">
    function clear() {
        Source = document.body.firstChild.data;
        document.open();
        document.close();
        document.body.innerHTML = Source;
    }
</script>
</body>
</html>